<template>
  <div class="all">
    <div class="background" :style="bg_class">
      <div class="sayhi">
        Hi~
      </div>
      <div class="sayhello">
        欢迎登录加盟商管理系统
      </div>
      <van-form validate-first @failed="onFailed">
        <div class="phone item_field">
          <van-field :rules="[{required: true,message: '请输入用户信息'}]" :border="false" style=""
            v-model="login_data.mobile" placeholder="请输入用户名、邮箱或手机号">
            <template #left-icon>

              <svg-icon class-name="icon_size" icon-class="user" />
            </template>
          </van-field>
        </div>
        <div class="password item_field">
          <van-field :rules="[{ required: true, message: '请填写密码' }]" :border="false" style=""
            v-model="login_data.password" type="password" placeholder="请输入密码">
            <template #left-icon>

              <svg-icon class-name="icon_size" icon-class="password" />
            </template>
          </van-field>
        </div>
        <div class="submit_out">
          <van-button @click="login" class="submit">登录</van-button>
        </div>
      </van-form>
    </div>
  </div>

</template>

<script>
  import {
    mapActions
  } from "vuex";
  export default {
    name: 'login',
    data() {
      return {
        bg_class: {
          background: "url(" + require("@/assets/login/bg_end.png") + ")",
          backgroundSize: "auto 100%",
          backgroundRepeat: "no-repeat",
        },
        show: false,
        login_data: {
          mobile: '',
          password: '',
        }
      }
    },
    methods: {
      ...mapActions(['toLogin']),
      login(value) {
        console.log("submit:", value)
        if (!this.login_data.mobile) {
          return false;
        }


        if (!this.login_data.password) {
          return false;
        }

        

        this.$store.dispatch('toLogin',this.login_data).then(res => {
          // this.$notify(res)
          console.log(res);
          
          this.$router.push("/home")
        }).catch( error => {
          console.log(error);
          
          this.$notify(
            error

          )
        })

      },


      onFailed(value) {
        console.log('error', value)
      }
    },
  }
</script>

<style lang="less" scoped>
  .all {
    margin: 0;
    padding: 50px;
    background-color: #f3f5f7;
    height: 100vh;
    box-sizing: border-box;
  }

  .background {
    padding-left: 65px;
    padding-top: 130px;
    height: 1018px;

  }

  .sayhi {
    width: 92px;
    height: 65px;
    color: rgba(242, 147, 33, 1);
    letter-spacing: 2.7770830154418946px;
    font-size: 55.54166030883789px;
  }

  .sayhello {
    margin-top: 15.14px;
    width: 390px;
    height: 38px;
    color: rgba(51, 51, 51, 1);
    letter-spacing: 1.6px;
    font-size: 32px;
  }

  .phone {
    margin-top: 185.94px;
  }

  .password {
    margin-top: 68.84px;
  }

  .item_field {
    width: 520px;
    color: rgba(153, 153, 153, 1);
    letter-spacing: 1.2000000000000002px;
    font-size: 24px;
    border-bottom: 1.38px solid rgba(153, 153, 153, 1);
  }

  .icon_size {
    width: 30px;
    height: 30px;
    margin-right: 15px;
  }

  .submit_out {
    margin-top: 100px;

    .submit {
      width: 473.61px;
      height: 75.68px;
      margin-left: 13.49px;
      border-radius: 37.84px;
      background-color: rgba(235, 95, 17, 1);
      letter-spacing: 1.8px;
      font-size: 36px;
      color: rgba(255, 255, 255, 1);
    }
  }
</style>